import { Directive, ElementRef, HostListener, Input } from '@angular/core';

@Directive({
  selector: '[appTooltip]'
})
export class TooltipDirective {
  defaultColor: string = 'red';
  tooltip: HTMLDivElement;

  constructor(private el: ElementRef) { 
    console.log(this.el)
  }

  @Input('myHighlight') highlightColor: string;
  @Input('text')       TooltipText:string;

  @HostListener('mouseenter', ['$event.target'])  onMouseEnter(btn: HTMLElement) {
    this.tooltip= document.createElement('div')
    let arrow = document.createElement('div')
    arrow.className = 'tooltipArrow';

    arrow.setAttribute('style',`
    position: absolute;
    display: block;
    width: .4rem;
    height: .8rem;
    `)
    this.tooltip.innerHTML = this.TooltipText
    this.tooltip.className = 'endTooltipClass'
    this.tooltip.setAttribute('style',`
    position:absolute;
    left:80px;
    top:0;
    font-size：12px;
    width:450px;
    margin-left:5px;
    padding-left:10px; 
    text-align:left;
    background:url(/assets/image/leftarrow.png);
    background-size:100% 100%;
    color:rgba(34,34,34,1);
    font-family:PingFangSC-Regular,PingFangSC;
    `
    )
    this.tooltip.appendChild(arrow);
    btn.append(this.tooltip)
  }  

  @HostListener('mouseleave') onMouseLeave() {
    this.el.nativeElement.removeChild(this.tooltip)
  }
}
 